import { m } from "framer-motion";
import { Fragment, memo, ReactNode } from "react";
import { clsxm } from "shared/helpers";
import { IEventItem } from "@/lib/types";
import SearchIcon from "@/assets/icons/search.svg?jsx";

type EventItemProps = {
  event: IEventItem;
};

export default memo(EventItem);

function EventItem(props: EventItemProps) {
  const { event } = props;
  return (
    <m.div
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "0px 0px -50px 0px" }}
      transition={{ type: "spring", stiffness: 100, mass: 1, damping: 10 }}
      className="rounded bg-[#4C9571]/10 p-4"
    >
      {event.title && <h3 className="mb-4 text-lg font-bold">{event.title}</h3>}
      {event.content && (
        <div className="mb-4 text-sm font-normal leading-[22px] text-[#1E1E1E]">
          事件内容：
          {event.content}
        </div>
      )}
      {event.type && <EventDetail title="事件类型：" content={event.type} />}
      {event.people && (
        <EventDetail
          title="相关人物："
          content={
            <span>
              {event.people.map((p, index) => (
                <Fragment key={p}>
                  <a
                    href={`https://names.library.sh.cn/mrgf/service/person/list?freetext=${p}`}
                    target="_blank"
                    className="text-[#0B9682]"
                  >
                    {p}
                    <sup>
                      &nbsp;
                      <SearchIcon className="inline" height={10} width={10} />
                    </sup>
                  </a>
                  {index !== event.people.length - 1 && "、"}
                </Fragment>
              ))}
            </span>
          }
        />
      )}
      {event.place && (
        <EventDetail title="相关地点：" content={event.place.join("、")} />
      )}
      {event.organization && (
        <EventDetail
          title="相关机构："
          content={event.organization.join("、")}
        />
      )}
    </m.div>
  );
}

function EventDetail({
  title,
  content,
  className,
}: {
  title: string;
  content: ReactNode;
  className?: string;
}) {
  return (
    <div className={clsxm("text-sm", className)}>
      <span className="text-[#5D6C6A]">{title}</span>
      <span className="">{content}</span>
    </div>
  );
}
